<template>
  <div class="product" :class="[skin]">
    <!--右键显示菜单-->
    <transition name="el-zoom-in-top">
      <div
        class="right-click-menu"
        v-show="rightClick"
        :style="{ left: rClickX + 'px', top: rClickY + 'px' }"
      >
        <div class="menu-list">
          <div
            class="menu-item"
            v-if="tabIndex == 2"
            @click.stop="addToChoice(2)"
          >
            移除自选
          </div>
          <div class="menu-item" v-else @click.stop="addToChoice(1)">
            加入自选
          </div>
          <!-- <ul class="menu-group">
            <li v-if="activeContractIsCollected" @click="removeCollect">移除自选</li>
            <li v-else @click="addCollect">加入自选</li>
          </ul>-->
        </div>
      </div>
    </transition>
    <!-- 行情列表主体 -->
    <!-- <div class="market-page" @contextmenu.prevent="contextMenu($event)"> -->
    <div class="market-page" @contextmenu.prevent="contextMenu($event)">
      <table border="0" cellspacing="0" cellpadding="0" class="marketlist">
        <thead>
          <tr>
            <th>
              <span class="color-yellow asc">{{ $t("market.index") }}</span>
            </th>
            <th>{{ $t("market.name") }}</th>
            <th>{{ $t("market.newest") }}</th>
            <!-- <th>{{$t('market.newvol')}}</th> 无现手字段-->
            <th>{{ $t("market.buyingPrice") }}</th>
            <!--<span class='asc'>买价</span>-->
            <th>{{ $t("market.sellingPrice") }}</th>
            <th>{{ $t("market.buy") }}</th>
            <th>{{ $t("market.salesVolume") }}</th>
            <th>{{ $t("market.vol") }}</th>
            <th>{{ $t("market.position") }}</th>
            <th>{{ $t("market.balance") }}</th>
            <th>{{ $t("market.change") }}</th>
            <th>{{ $t("market.range") }}%</th>
            <th>{{ $t("market.open") }}</th>
            <th>{{ $t("market.highest") }}</th>
            <th>{{ $t("market.minimum") }}</th>
            <th>{{ $t("market.code") }}</th>
            <th>{{ $t("market.time") }}</th>
          </tr>
        </thead>
        <!-- 所有 -->
        <tbody class="color-yellow" v-if="tabIndex === 1">
          <tr
            v-for="(list, index) in temp_hangqing"
            @click="updateKline(list, index, tabIndex)"
            @dblclick="loadPage(list)"
            :class="{ selected: activeIndex === index }"
            :key="list.heyue_id"
			v-show="list.zhu_bz==1"
          >
            <td>
              <div>{{ index + 1 }}</div>
            </td>
            <!-- 名称 -->
            <td class="rtl">
              <div v-if="list.heyue_name">{{ list.heyue_name }}<span :class="list.zhu_bz == 0 ? activeIndex == index? 'selectnozhuli' :'nozhuli': 'zhuli'">M</span></div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最新 -->
            <td>
              <div
                v-if="list.currentPrice !== undefined && list.currentPrice > 0"
                :class="classObj(list.currentPrice, list.settlementYes)"
              >
                {{ list.currentPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 买价 -->
            <td>
              <div
                v-if="list.buy1 !== undefined && list.buy1 > 0"
                :class="classObj(list.buy1, list.settlementYes)"
              >
                {{ list.buy1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 卖价 -->
            <td>
              <div
                v-if="list.seller1 !== undefined && list.seller1 > 0"
                :class="classObj(list.seller1, list.settlementYes)"
              >
                {{ list.seller1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 买量 -->
            <td>
              <div v-if="list.buyVol1 !== undefined && list.buyVol1 > 0">
                {{ list.buyVol1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 卖量 -->
            <td>
              <div
                v-if="list.sellingVol1 !== undefined && list.sellingVol1 > 0"
              >
                {{ list.sellingVol1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 成交量 -->
            <td>
              <div v-if="list.volume !== undefined && list.volume > 0">
                {{ list.volume }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 持仓量 -->
            <td>
              <div v-if="list.inventory !== undefined && list.inventory > 0">
                {{ list.inventory }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 昨结 -->
            <td class="yesterday">
              <div
                v-if="
                  list.settlementYes !== undefined && list.settlementYes > 0
                "
              >
                {{ list.settlementYes }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 涨跌 -->
            <td>
              <div
                v-if="list.nowUpw !== undefined && list.nowUpw !== 0"
                :class="classObj(list.nowUpw, 0)"
              >
                {{ parseFloat(list.nowUpw) }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 幅度 -->
            <td>
              <div
                v-if="list.nowGain !== undefined && list.nowGain !== 0"
                :class="classObj(list.nowGain, 0)"
              >
                {{ list.nowGain }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 开盘 -->
            <td>
              <div
                v-if="list.openingToday !== undefined"
                :class="classObj(list.openingToday, list.settlementYes)"
              >
                {{ list.openingToday }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最高价 -->
            <td>
              <div
                v-if="list.highestPrice !== undefined"
                :class="classObj(list.highestPrice, list.settlementYes)"
              >
                {{ list.highestPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最低价 -->
            <td>
              <div
                v-if="list.lowestPrice !== undefined"
                :class="classObj(list.lowestPrice, list.settlementYes)"
              >
                {{ list.lowestPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 合约代号 -->
            <td>
              <div v-if="list.heyue_bh !== undefined">{{ list.heyue_bh }}</div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 时间 -->
            <td>
              <div v-if="list.updateTime !== undefined">
                {{ list.updateTime }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
          </tr>
        </tbody>
        <!-- 自选 -->
        <tbody class="color-yellow" v-else-if="tabIndex === 2">
          <tr
            v-for="(list, index) in temp_hangqing"
            @click="updateKline(list, index, tabIndex)"
            @dblclick="loadPage(list)"
            :class="{ selected: activeIndex === index }"
            :key="list.heyue_id"
            v-show="list.Optional"
          >
            <td>
              <div>{{ index + 1 }}</div>
            </td>
            <!-- 名称 -->
            <td class="rtl">
              <div v-if="list.heyue_name">{{ list.heyue_name }}<span :class="list.zhu_bz == 0 ? activeIndex == index? 'selectnozhuli' :'nozhuli': 'zhuli'">M</span></div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最新 -->
            <td>
              <div
                v-if="list.currentPrice !== undefined && list.currentPrice > 0"
                :class="classObj(list.currentPrice, list.settlementYes)"
              >
                {{ list.currentPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 买价 -->
            <td>
              <div
                v-if="list.buy1 !== undefined && list.buy1 > 0"
                :class="classObj(list.buy1, list.settlementYes)"
              >
                {{ list.buy1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 卖价 -->
            <td>
              <div
                v-if="list.seller1 !== undefined && list.seller1 > 0"
                :class="classObj(list.seller1, list.settlementYes)"
              >
                {{ list.seller1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 买量 -->
            <td>
              <div v-if="list.buyVol1 !== undefined && list.buyVol1 > 0">
                {{ list.buyVol1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 卖量 -->
            <td>
              <div
                v-if="list.sellingVol1 !== undefined && list.sellingVol1 > 0"
              >
                {{ list.sellingVol1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 成交量 -->
            <td>
              <div v-if="list.volume !== undefined && list.volume > 0">
                {{ list.volume }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 持仓量 -->
            <td>
              <div v-if="list.inventory !== undefined && list.inventory > 0">
                {{ list.inventory }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 昨结 -->
            <td class="yesterday">
              <div
                v-if="
                  list.settlementYes !== undefined && list.settlementYes > 0
                "
              >
                {{ list.settlementYes }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 涨跌 -->
            <td>
              <div
                v-if="list.nowUpw !== undefined && list.nowUpw !== 0"
                :class="classObj(list.nowUpw, 0)"
              >
                {{ list.nowUpw }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 幅度 -->
            <td>
              <div
                v-if="list.nowGain !== undefined && list.nowGain !== 0"
                :class="classObj(list.nowGain, 0)"
              >
                {{ list.nowGain }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 开盘 -->
            <td>
              <div
                v-if="list.openingToday !== undefined"
                :class="classObj(list.openingToday, list.settlementYes)"
              >
                {{ list.openingToday }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最高价 -->
            <td>
              <div
                v-if="list.highestPrice !== undefined"
                :class="classObj(list.highestPrice, list.settlementYes)"
              >
                {{ list.highestPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最低价 -->
            <td>
              <div
                v-if="list.lowestPrice !== undefined"
                :class="classObj(list.lowestPrice, list.settlementYes)"
              >
                {{ list.lowestPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 合约代号 -->
            <td>
              <div v-if="list.heyue_bh !== undefined">{{ list.heyue_bh }}</div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 时间 -->
            <td>
              <div v-if="list.updateTime !== undefined">
                {{ list.updateTime }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
          </tr>
        </tbody>
        <!-- 其他 -->
        <tbody class="color-yellow" v-else>
          <tr
            v-for="(list, index) in temp_hangqing"
            @click="updateKline(list, index, tabIndex)"
            @dblclick="loadPage(list)"
            :class="{ selected: activeIndex === index }"
            :key="list.heyue_id"
            v-show="list.shichang_name == tabIndex"
          >
            <td>
              <div>{{ index + 1 }}</div>
            </td>
            <!-- 名称 -->
            <td class="rtl">
              <div v-if="list.heyue_name">{{ list.heyue_name }}<span :class="list.zhu_bz == 0 ? activeIndex == index? 'selectnozhuli' :'nozhuli': 'zhuli'">M</span></div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最新 -->
            <td>
              <div
                v-if="list.currentPrice !== undefined && list.currentPrice > 0"
                :class="classObj(list.currentPrice, list.settlementYes)"
              >
                {{ list.currentPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 买价 -->
            <td>
              <div
                v-if="list.buy1 !== undefined && list.buy1 > 0"
                :class="classObj(list.buy1, list.settlementYes)"
              >
                {{ list.buy1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 卖价 -->
            <td>
              <div
                v-if="list.seller1 !== undefined && list.seller1 > 0"
                :class="classObj(list.seller1, list.settlementYes)"
              >
                {{ list.seller1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 买量 -->
            <td>
              <div v-if="list.buyVol1 !== undefined && list.buyVol1 > 0">
                {{ list.buyVol1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 卖量 -->
            <td>
              <div
                v-if="list.sellingVol1 !== undefined && list.sellingVol1 > 0"
              >
                {{ list.sellingVol1 }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 成交量 -->
            <td>
              <div v-if="list.volume !== undefined && list.volume > 0">
                {{ list.volume }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 持仓量 -->
            <td>
              <div v-if="list.inventory !== undefined && list.inventory > 0">
                {{ list.inventory }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 昨结 -->
            <td class="yesterday">
              <div
                v-if="
                  list.settlementYes !== undefined && list.settlementYes > 0
                "
              >
                {{ list.settlementYes }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 涨跌 -->
            <td>
              <div
                v-if="list.nowUpw !== undefined && list.nowUpw !== 0"
                :class="classObj(list.nowUpw, 0)"
              >
                {{ list.nowUpw }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 幅度 -->
            <td>
              <div
                v-if="list.nowGain !== undefined && list.nowGain !== 0"
                :class="classObj(list.nowGain, 0)"
              >
                {{ list.nowGain }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 开盘 -->
            <td>
              <div
                v-if="list.openingToday !== undefined"
                :class="classObj(list.openingToday, list.settlementYes)"
              >
                {{ list.openingToday }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最高价 -->
            <td>
              <div
                v-if="list.highestPrice !== undefined"
                :class="classObj(list.highestPrice, list.settlementYes)"
              >
                {{ list.highestPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 最低价 -->
            <td>
              <div
                v-if="list.lowestPrice !== undefined"
                :class="classObj(list.lowestPrice, list.settlementYes)"
              >
                {{ list.lowestPrice }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 合约代号 -->
            <td>
              <div v-if="list.heyue_bh !== undefined">{{ list.heyue_bh }}</div>
              <div class="pricenull" v-else>--</div>
            </td>
            <!-- 时间 -->
            <td>
              <div v-if="list.updateTime !== undefined">
                {{ list.updateTime }}
              </div>
              <div class="pricenull" v-else>--</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 异地登录提示 -->
    <el-dialog
      :visible="islogVisible"
      width="28vw"
      top="25vh"
      :append-to-body="true"
      custom-class="tips-alert"
      @close="dialogClose"
    >
      <div slot="title" class="dialog-title">{{ $t("tip.tip") }}</div>
      <div class="dialog-content">
        <img class="dialog-icon" src="../../assets/img/dialog-sure.png" />
        <span class="dialog-msg">{{ $t("tip.repeatLogin") }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- 确认 -->
        <button class="confirm-btn btn-sure" @click="handleClosetip">
          <span>{{ $t("login.confirm") }}</span>
        </button>
        <!-- 取消 -->
        <!-- <div class="confirm-btn btn-cancel" @click.stop="dialogClose">
          <span>{{$t('tip.cancel')}}</span>
        </div> -->
      </div>
    </el-dialog>
    <!-- 重新连接mqtt提示 -->
    <el-dialog
      :visible="isReconnect"
      width="28vw"
      top="25vh"
      :append-to-body="true"
      custom-class="tips-alert"
      @close="dialogCloserec"
    >
      <div class="dialog-content">
        <img class="dialog-icon" src="../../assets/img/dialog-sure.png" />
        <span class="dialog-msg">重连失败，请重新登录</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- 确认 -->
        <button class="confirm-btn btn-sure" @click="handleCloserec">
          <span>{{ $t("login.confirm") }}</span>
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import qs from "querystring";
import { mapGetters } from "vuex";
export default {
  name: "Home",
  inject: ["reload"],
  computed: {
    ...mapGetters([
      "islogVisible",
      "isReconnect", // 5次之后是否重连
      "skin",
      "contractlist", // 产品列表（无行情的）
      "actcontract", // 用户当前选中的合约id
      "latestMarket", // 最新行情数据,
      "positionlist", // 持仓单列表
      "ponIndex",
      "rightClick",
      "tabIndex",
      "optional", // 用户自选
    ]),
  },
	watch: {
		actcontract: {
			handler(newVal, oldVal) {
				let that = this;
				// 如果当前是undefind ,return
				if (newVal === undefined) return;
				if (this.contractlist.length === 0) return;
				// 判断当前是默认选中状态
				if (newVal === null) {
					let nowId = this.contractlist[this.activeIndex].heyue_id;
					// this.$store.commit("product/SET_ACTCONTRACT", nowId);
					this.$store.dispatch("product/updateActcontract", nowId);
					return;
				}

				if (oldVal === newVal) return;
				// 判断当前选中的id和选中序号是否匹配
				for (let [index, val] of this.contractlist.entries()) {
					if (val.heyue_id === newVal && that.activeIndex !== index) {
						that.activeIndex = index;
						break;
					}
				}
			},
			deep: true,
			immediate: true,
		},
		latestMarket(newVal,oldVal){
			this.temp_hangqing = newVal
			let len = newVal.length
			for(let i=0;i<len;i++){
				if(newVal[i].currentPrice!=oldVal[i].currentPrice)
					this.temp_hangqing[i].flag = 1
				else
					this.temp_hangqing[i].flag = 0
			}
			
			console.log(this.temp_hangqing)
		}
	},
	data() {
		return {
			hands: 1, // 手数,最小1笔 (下单表单中)
			isLock: false, // 是否锁定合约种类 true 为锁定
			activeIndex: 0, // 当前选中的tr行
			optIndex: -1, // 当前自选的选中行
			rClickX: 0, // 右键菜单X距离
			rClickY: 0, // 右键菜单Y距离
			idRemove: false, // 当前选中合约是在自选列表中
			temp_hangqing:[]
		};
	},

  methods: {
    dialogClose() {
      this.$store.dispatch("user/logout");
      this.$store.dispatch("user/updateLogVisible", false);
      location.reload();
    },
    dialogCloserec() {
      this.$store.dispatch("user/logout");
      this.$store.dispatch("user/updateReconnect", false);
      location.reload();
    },
    handleClosetip() {
      this.$store.dispatch("user/logout");
      this.$store.dispatch("user/updateLogVisible", false);
      location.reload();
    },
    handleCloserec() {
      this.$store.dispatch("user/logout");
      this.$store.dispatch("user/updateReconnect", false);
      location.reload();
    },
    updateKline(list, index, type) {
      // console.log('list:', list)
      // 点击改变当前选中的合约
      if (type === 1) this.activeIndex = index;
      // this.$store.commit("product/SET_ACTCONTRACT", list.heyue_id);
      this.$store.dispatch("product/updateActcontract", list.heyue_id);
      let heyueID = list.heyue_id;
      let _list = [];
      let bus1 = 0,
        bus2 = 0;
      if (this.positionlist.length !== 0) {
        this.positionlist &&
          this.positionlist.map((item, i) => {
            if (item.ContractID == heyueID) {
              _list.push(this.positionlist[i]);
            }
          });
        let lenNum = _list;
        if (_list.length == 1) {
          this.positionlist &&
            this.positionlist.map((item, i) => {
              if (item.ContractID == heyueID) {
                this.$store.dispatch(
                  "panel/updateIsbuy",
                  this.positionlist[i].BusCode
                );
                this.$store.dispatch("panel/updatePonIndex", i);
                // this.$store.commit("panel/SET_PONINDEX", i)
              }
            });
        } else if (_list.length > 1) {
          for (let i = 0; i < _list.length; i++) {
            if (_list[i].BusCode == "1") {
              bus1 += _list[i].Quantity;
            } else if (_list[i].BusCode == "2") {
              bus2 += _list[i].Quantity;
            }
          }
          if (bus1 !== bus2) {
            for (let m = 0; m < this.positionlist.length; m++) {
              if (this.positionlist[m].ContractID == heyueID) {
                console.log("持仓id", m);
                this.$store.dispatch(
                  "panel/updateIsbuy",
                  this.positionlist[m].BusCode
                );
                this.$store.dispatch("panel/updatePonIndex", m);
                return;
              }
            }
          }
        }
      }

      // if (type === 2) this.optIndex = index;
      // console.log(this.optIndex)
    },
    loadPage(list) {
      let that = this;
      // 双击进入K线图页面1
      // console.log(list.heyue_id);
      // this.reload();
      this.$router.push("/kline");
    },
    classObj(a, b) {
      /*颜色 红涨绿跌*/
      if (a > b) {
        // 涨
        return ["pricerise"];
      } else if (a < b) {
        // 跌
        return ["pricefall"];
      } else if (a === b) {
        return ["priceflat"];
      }
    },
    // 鼠标右键事件
    contextMenu(ev) {
      console.log(this.latestMarket);
      // console.log(ev);
      let oEvent = ev || event;
      let popW = 154, // 弹出菜单宽度
        popH = 50, // 弹出菜单高度
        clientX = oEvent.clientX,
        clientY = oEvent.clientY,
        clientW = document.documentElement.clientWidth,
        clientH = document.documentElement.clientHeight;

      if (clientX > clientW - popW) clientX = clientW - popW;

      if (clientY > clientH - popH) clientY = clientY - popH;

      this.rClickX = clientX;
      this.rClickY = clientY;
      this.$store.commit("bar/SET_RIGHTMENU", true);

      //console.log(this.contractlist)
    },
    // 加入自选
    addToChoice(type) {
      let nowObj = [this.actcontract, type]; // 0 id 1: 1新增2删除
      // console.log("当前自选：", nowObj);
      // 加入自选
      this.$store.dispatch("bar/updateOptional", nowObj);
      // 关闭鼠标右键菜单
      this.$store.commit("bar/SET_RIGHTMENU", false);
    },
  },
};
</script>

<style lang="scss" scoped>
	.zhuli {
		font-size: 8px;
		color: black;
		margin-left: 4px;
		background-color: red;
		line-height: 25px;
	}
	.nozhuli {
		font-size: 10px;
		color: black;
		margin-left: 4px;
	}
	.selectnozhuli {
		font-size: 10px;
		color: #4b4b4b;
		margin-left: 4px;
	}
.product {
  width: 100%;
  height: 100%;
  position: relative;
  .right-click-menu {
    display: block;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    background-color: #ffffff;
    .menu-list {
      border: 1px solid #7a7a7a;
      background: #ebebeb;
      padding: 2px;
      white-space: nowrap;
      border-left: 4px solid #7a7a7a;
      .menu-item {
        position: relative;
        line-height: 22px;
        padding-left: 30px;
        min-width: 74px;
        padding-right: 50px;
        margin-bottom: 4px;
        &::after {
          content: "";
          position: absolute;
          left: 26px;
          right: 0;
          bottom: -2px;
          height: 1px;
          background: #d4d4d4;
        }
        &:nth-last-child(1) {
          margin-bottom: 0px;
          &::after {
            height: 0;
          }
        }
        &:hover {
          background: #9dcef4;
        }
      }
    }
  }
  .market-page {
    height: 100%;
    overflow: hidden;
    position: relative;
    .marketlist {
      border: none;
      width: 100%;
      height: 100%;
      position: relative;
      padding-top: 8px;
      white-space: nowrap;
      user-select: none;
      &::before {
        content: "";
        position: absolute;
        top: 9px;
        right: -2px;
        width: 1.4rem;
        height: 25px;
        background: url("../../assets/img/market-h-icon.jpg") no-repeat center;
      }
      thead {
        display: table;
        width: 100%;
        table-layout: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 25px;
        background: transparent;
        width: calc(100% - 1.4em);
        tr {
          position: relative;
        }
      }
      tbody {
        height: calc(100% - 25px);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        overflow-y: scroll;
        tr {
          display: table;
          width: 100%;
          table-layout: fixed;
        }
      }
      tr {
        overflow: hidden;
        height: 22px;
        &.selected {
          background: #4b4b4b;
        }
        th {
          width: 5.5%;
          padding: 4px 4px;
          white-space: nowrap;
          font-size: 15px;
          text-align: right;
          font-weight: normal;
          overflow: hidden;
          color: #00ffff;
          &:first-child {
            width: 3%;
            text-align: right;
          }
          &:nth-child(2) {
            width: 12%;
            text-align: right;
          }
          &:nth-child(4),
          &:nth-child(7),
          &:nth-child(8) {
            width: 4.5%;
            text-align: right;
          }
          &:nth-last-of-type(1) {
            width: 7.4%;
            text-align: center;
          }
          .o {
            color: #ffff00;
          }
        }
        td {
          width: 5.5%;
          padding: 4px 4px;
          white-space: nowrap;
          text-align: right;
          font-weight: 400;
          overflow: hidden;
          line-height: 22px;
          font-size: 14px;
          cursor: default;
          &:first-child {
            width: 3%;
            text-align: right;
          }
          &:nth-child(2) {
            width: 12%;
            text-align: right;
          }
          &:nth-child(4),
          &:nth-child(7),
          &:nth-child(8) {
            width: 4.5%;
            text-align: right;
          }
          &:nth-last-of-type(1) {
            width: 7.4%;
            text-align: center;
          }
        }
      }
      .rtl {
        direction: rtl;
      }
      .color-null {
        color: #e7e7e7;
      }
      .color-white {
        color: #e7e7e7;
      }
      .asc {
        padding-right: 10px;
        background: url("../../assets/img/o-asc.jpg") right center no-repeat;
      }
      .desc {
        padding-right: 10px;
        background: url("../../assets/img/o-desc.jpg") right center no-repeat;
      }
    }
  }

  &.skin-dark {
    background-color: #000000 !important;
    .market-page {
      .marketlist {
        tr {
          th {
            &:first-child {
              .color-yellow {
                color: #ffff00;
              }
            }
          }
          td {
            color: #ffff00;
            .pricerise {
              color: #ff3c39;
            }
            .pricefall {
              color: #00e700;
            }
            .pricenull {
              color: #ffffff;
            }
            .priceflat {
              color: #ffffff;
            }
            &.yesterday {
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  &.skin-light {
    background-color: #ffffff !important;
    .color-white,
    .color-null,
    .color-yellow {
      color: #999 !important;
    }
    .market-page {
      .marketlist {
        &::before {
          background-image: url("../../assets/img/market-h-icon-s.jpg");
        }
        tr {
          &.selected {
            background: #fce9a0 !important;
          }
          th {
            background: #fce9a0;
            color: #804000;
            &:first-child .color-yellow {
              color: #ff3c39 !important;
            }
            div {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
            }
          }
          td {
            div {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
            }
            .pricerise {
              color: #ff3c39;
            }
            .pricefall {
              color: #00e700;
            }
          }
        }

        tbody {
          tr {
            &:nth-child(2n) {
              background: #ffffec;
            }
          }
        }
        .asc {
          background: url("../../assets/img/o-asc-red.jpg") right center
            no-repeat;
        }
      }
    }
  }
}
</style>
